<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }

    .ivu-modal-content {
        max-height: 600px;
        overflow: auto;
    }
</style>
<template>
    <div style="width: 500px">
        <h4>编辑角色权限</h4>
        <Alert show-icon>
            此处用于编辑角色权限。
        </Alert>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
            <Form-item label="选择权限" prop="rights">
                <!--                <Select v-model="formValidate.rights" @on-change="rightChange" multiple style="width:260px">-->
                <!--                    <Option v-for="item in rightArr" :value="item.Id" :key="item.Id">{{ item.Title }}</Option>-->
                <!--                </Select>-->
                <i-select placeholder="选择权限" v-model="flow" multiple filterable
                          @on-change="checkChangeGate">
                    <i-option v-for="(item,index) in rightArr" :value="item.Id">
                        {{ item.Title }}
                    </i-option>
                </i-select>
            </Form-item>
            <Form-item>
                <i-button @click="handleSubmit('formValidate')" type="primary">提交</i-button>
                <i-button @click="jumpPage('','peopleTypeList')" style="margin-left: 8px">返回</i-button>
            </Form-item>
        </Form>

    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                formValidate: {
                    //添加字段
                    levelId: '',
                    rights: [],
                },
                flow: [],
                ruleValidate: {},
                rightArr: [],
            }
        },
        mounted() {
            this.getRightData();
        },
        components: {},
        methods: {
            //获取权限表
            getRightData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetRightTable, para, function (res) {
                    that.$Loading.finish();
                    that.rightArr = res.Msg;
                    that.getRightLevelTableData();
                });

            },
            checkChangeGate(data) {
                this.flow = Array.from(data);
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                that.comfirmModifyPS(model);
                // this.$refs[name].validate((valid) => {
                //     console.log('model:',model)
                // })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                var selectedItemIds = "";
                for (var i = 0; i < that.flow.length; i++) {
                    selectedItemIds += that.flow[i].toString() + ",";
                }
                selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                // that.flow.forEach(function (item, index) {
                //     // let subItem = {};
                //     let Rulecontent = [];
                //
                //     subItem.Index = (index + 1);
                //     subItem.AccountRightId = item;
                //     Rulecontent.push(subItem);
                // });

                let url = '';
                let para = {};
                if (that.$route.query.type == 1) {
                    url = apiUtil.urls.SetRightLevelTable;
                    para = {
                        levelId: that.$route.query.id,
                        hasRights: selectedItemIds,
                        // hasRights: JSON.stringify(Rulecontent),
                    }
                } else {
                    url = apiUtil.urls.SetAccountSpecRight;
                    para = {
                        accountId: that.$route.query.id,
                        hasRights: selectedItemIds,
                    }
                }

                let params = that.$qs.stringify(para);

                apiUtil.post(that, url, params, function (res) {
                    that.$Message.info('添加成功 ')
                });
            },
            //rightChange
            rightChange: function (value) {

                console.log('value:', value)
            },
            //查看角色已有权限
            getRightLevelTableData: function () {
                let that = this;
                let para = {};
                let url = '';

                if (that.$route.query.type == 1) {
                    para = {
                        levelId: that.$route.query.id,
                    };
                    url =apiUtil.urls.GetRightLevelTable;
                } else {
                    para = {
                        accountId: that.$route.query.id,
                    };
                    url =apiUtil.urls.GetAccountSpecRight;
                }

                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, url, para, function (res) {
                    that.$Loading.finish();
                    that.flow = res.Msg.split(',').map(Number);


                    // let Rulecontent = JSON.parse(res.Msg);
                    //
                    // Rulecontent.forEach(function (item,index) {
                    //     that.flow.push(item)
                    // })

                    console.log('flow:', that.flow)
                });
            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id,
                            value: ''
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
        },
    }
</script>
